<template>
  <a-spin
    class="myImg"
    :spinning="spinning"
    :style="{ width: imgWidth, height: imgHeight }"
    tip="奋力加载中..."
  >
    <img :src="imgSrc" :width="imgWidth" :height="imgHeight" alt="" @load="loadImage(imgSrc)" @error="showDefault()"/>
  </a-spin>
</template>

<script>
export default {
  props: ["imgSrc", "imgWidth", "imgHeight"],
  data() {
    return {
      spinning: true,
    };
  },
  methods: {
    changeSpinning() {
      this.spinning = !this.spinning;
    },
    loadImage(imgSrc){
      this.changeSpinning()
    },
    showDefault(){
      this.imgSrc = '/images/defaultImg.png'
    }
  },
};
</script>

<style lang="less" scoped>
.myImg {
  //border: 1px solid #91d5ff;
  background-color: rgba(230, 247, 255, .3)
}
</style>